import React, { useState, useEffect } from 'react'
import '../static/less/detail.less'
import { detail,chapter } from '../api/index'
import { useSearchParams,Link } from 'react-router-dom'

export default function Detail() {
    let [list, setList] = useState({})
    let [cList, setClist] = useState([])
    const [searchParams, setSearchParams] = useSearchParams();
    let [id, setId] = useState(searchParams.get('id'));
    let [isLove, setIsLove] = useState(false);
    const DetailFn = async () => {
        await detail({ id: id }).then(
            content => {
                // console.log(content);
                let { code, data } = content;
                if (code == 200) {
                    setList(data);
                }
            }
        )
    }

    const ChapterFn = async() =>{
        await chapter({id:id}).then(
            content=>{
                // console.log(content);
                let {code,data} = content;
                if(code == 200){
                    setClist(data);
                }
            }
        )
    }

    const LoveFn = ()=>{
        let v = [];
        v = localStorage.getItem("idList");
        if(v == null){
            setIsLove(false);
        }
        else{
            v = JSON.parse(v);
            v?.map((item,i)=>{
                if(id == item){
                    setIsLove(true);
                    return false
                }
            })
        }
        let list = v;
        // console.log(list);
        list?.push(id);
        // console.log(list);
        localStorage.setItem("idList",JSON.stringify(list));
        setIsLove(true);
    }
    const isLoveFn = ()=>{
        let v = [];
        v = localStorage.getItem("idList");
        if(v == null && v == '[]'){
            setIsLove(false);
        }
        else{
            v = JSON.parse(v);
            // console.log(v);
            v?.map((item,i)=>{
                if(id == item){
                    setIsLove(true);
                    return false
                }
            })
        }
    }

    // 初始化 
    useEffect(() => {
        DetailFn();
        ChapterFn();
        isLoveFn();
    }, [isLove])

    return (
        <div className='detail'>
            <div className='top'>
                <div className='back' onClick={
                    () => {
                        window.history.back();
                    }
                }></div>
                <h2 className='top-title'>漫画详情</h2>
            </div>
            <div className="bottom">
                <img className='pic' src={list.bigpic} alt="" />
                <div className='text'>
                    <div className='text_top'>
                        <h3 className='text_title'>{list.title}</h3>
                        {
                            list?.tag?.split(" ").map((item, i) => {
                                return (
                                    <div className='tag' key={i}>{item}</div>
                                )
                            })
                        }
                    </div>
                    <div className='text_bottom'>
                        <span className='num'>{list.urge_num}人气值</span>
                        <i></i>
                        <span className='num'>{list.num_comment}总评论</span>
                        <i></i>
                        <span className='num'>{list.num_look}人关注</span>
                    </div>
                    <div className='info'>
                        <p>简介：{list.info}</p>
                    </div>
                    <div className='lastChaper'>
                        已更新至{list.lastchapter}
                    </div>
                    <div className='chaperList'>
                        {
                            cList?.map((item,i)=>{
                                return(
                                    <div className='chapter-box' key={i}>
                                        <Link to={`/chapter?id=${item.id}&name=${list.title}&did=${id}`}>
                                            <img className='chapter-img' src={item.cover} alt="" />
                                            <div className='chapter-title'>{item.name}</div>
                                        </Link>
                                    </div>
                                )
                            })
                        }
                    </div>
                    <div className='shuju'>
                        <div className='author'>
                            作者：{list.author}
                            <i className='love' style={{display: isLove == false ? 'block' :'none'}} onClick={()=>{
                                LoveFn();
                            }}></i>
                            <i className='isLove' style={{display: isLove == false ? 'none' :'block'}}></i>
                        </div>
                        <div className='time'>
                            创建时间：{new Date(list.createtime).toLocaleString()}
                        </div>
                        <div className='time'>
                            更新时间：{new Date(list.updatetime).toLocaleString()}
                        </div>
                    </div>
                    <div className='read'>
                        <div className='read-left'>
                            <span>{list.title}</span><span>第一话</span>
                        </div>
                        <div className='read-right'>
                            <Link to={`/chapter?id=${list?.lastReadChapter?.id}&name=${list.title}&did=${id}`}>
                                <span>开始阅读</span>
                            </Link>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    )
}
